﻿<template>
    <div class="l-rblock l-form-viewer" style="padding:8px;">
        <el-form
            :model="formData"
            :rules="rules"
            size="mini"
            labelPosition="top"
            ref="form"
            >
            <div class="l-auto-window only-tabs">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
                        <el-row :gutter="80">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_Code')" :span="12" >
                                    <el-form-item 
                                        :label="$t('编码')" 
                                        prop="lr_sass_tenant_f_Code"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('lr_sass_tenant_f_Code')" v-model="formData.lr_sass_tenant_f_Code" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_Name')" :span="12" >
                                    <el-form-item 
                                        :label="$t('名称')" 
                                        prop="lr_sass_tenant_f_Name"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('lr_sass_tenant_f_Name')" v-model="formData.lr_sass_tenant_f_Name" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_Company')" :span="12" >
                                    <el-form-item 
                                        :label="$t('公司')" 
                                        prop="lr_sass_tenant_f_Company"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('lr_sass_tenant_f_Company')" v-model="formData.lr_sass_tenant_f_Company" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_TenantGroupId')" :span="12" >
                                    <el-form-item 
                                        :label="$t('租户组')" 
                                        prop="lr_sass_tenant_f_TenantGroupId"
                                        > 
                                        <l-select :disabled="!lr_formEditAuth('lr_sass_tenant_f_TenantGroupId')"  :options="lr_sass_tenant_f_TenantGroupIdOptions" v-model="formData.lr_sass_tenant_f_TenantGroupId" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_Mail')" :span="12" >
                                    <el-form-item 
                                        :label="$t('邮箱')" 
                                        prop="lr_sass_tenant_f_Mail"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('lr_sass_tenant_f_Mail')" v-model="formData.lr_sass_tenant_f_Mail" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_ExpireTime')" :span="12" >
                                    <el-form-item 
                                        :label="$t('过期时间')" 
                                        prop="lr_sass_tenant_f_ExpireTime"
                                        > 
                                        <l-date  :disabled="!lr_formEditAuth('lr_sass_tenant_f_ExpireTime')" format="yyyy-MM-dd" dateType="date" :clearable="true" v-model="formData.lr_sass_tenant_f_ExpireTime" :placeholder="$t('请选择')" />
                                    </el-form-item>
                                </el-col>
                              
                               
                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_EnabledMark')" :span="24" >
                                    <el-form-item 
                                        :label="$t('有效')" 
                                        prop="lr_sass_tenant_f_EnabledMark"
                                        > 
                                        <el-switch  
                                            :disabled="!lr_formEditAuth('lr_sass_tenant_f_EnabledMark')" 
                                            :activeValue="1" 
                                            :inactiveValue="0" 
                                            v-model="formData.lr_sass_tenant_f_EnabledMark" />
                                    </el-form-item>
                                </el-col>
                               
                                <el-col style="margin-bottom: 18px;" v-if="lr_formLookAuth('lr_sass_tenant_f_DbCode')" :span="24" >
                                    <el-form-item 
                                        :label="$t('主库')" 
                                        prop="lr_sass_tenant_f_DbCode"
                                        > 
                                        <el-select :disabled="!lr_formEditAuth('lr_sass_tenant_f_DbCode')"  v-model="formData.lr_sass_tenant_f_DbCode" :placeholder="$t('请选择')">
                                            <el-option-group
                                            v-for="group in lr_dblinkTreeNoSystem"
                                            :key="group.id"
                                            :label="group.label">
                                                <el-option
                                                    v-for="item in group.children"
                                                    :key="item.id"
                                                    :label="item.label"
                                                    :value="item.id">
                                                </el-option>
                                            </el-option-group>
                                        </el-select>
                                    </el-form-item>
                                    <div >
                                        <div v-for="(item, index) in cDbCodes"
                                            class="l-set-item"
                                            style="padding-left:0;"
                                            :key="index">
                                            <el-select style="width:49%;margin-right:1%;" size="mini" v-model="item.from" :placeholder="$t('请选择目标库')">
                                                <el-option-group
                                                v-for="group in lr_dblinkTreeNoSystem"
                                                :key="group.id"
                                                :label="group.label">
                                                    <el-option
                                                        v-for="item in group.children"
                                                        :key="item.id"
                                                        :label="item.label"
                                                        :value="item.id">
                                                    </el-option>
                                                </el-option-group>
                                            </el-select>
                                            <el-select style="width:49%;margin-right:1%;" size="mini" v-model="item.to" :placeholder="$t('请选择映射库')">
                                                <el-option-group
                                                v-for="group in lr_dblinkTreeNoSystem"
                                                :key="group.id"
                                                :label="group.label">
                                                    <el-option
                                                        v-for="item in group.children"
                                                        :key="item.id"
                                                        :label="item.label"
                                                        :value="item.id">
                                                    </el-option>
                                                </el-option-group>
                                            </el-select>
                                            <el-button 
                                                @click="handleRemoveCDbCodes(index)"
                                                circle
                                                plain
                                                type="danger"
                                                size="mini"
                                                icon="el-icon-minus"
                                                class="l-delete-item"
                                                style="padding: 4px;"></el-button>
                                        </div>
                                        <div class="mt-8 learun-form-btn" @click="handleAddCDbCodes"  >
                                            <el-button size="mini" type="text" >{{ $t('添加子库映射') }}</el-button>
                                        </div>
                                    </div>
                                </el-col>


                                <el-col v-if="lr_formLookAuth('lr_sass_tenant_f_Description')" :span="24" >
                                    <el-form-item 
                                        :label="$t('备注')" 
                                        prop="lr_sass_tenant_f_Description"
                                        > 
                                        <el-input type="textarea"  :disabled="!lr_formEditAuth('lr_sass_tenant_f_Description')" :rows="2" v-model="formData.lr_sass_tenant_f_Description" :placeholder="$t('请输入')" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
const api = window.$api.sass.tenant

export default {
    data(){
        return {
            moduleCode: 'sass_tenant',
            activeName: 'tab0',
            formData: {
                lr_sass_tenant_f_Code:"", // 编码
                lr_sass_tenant_f_Name:"", // 名称
                lr_sass_tenant_f_Company:"", // 公司
                lr_sass_tenant_f_TenantGroupId:"", // 租户组
                lr_sass_tenant_f_Mail:"", // 邮箱
                lr_sass_tenant_f_ExpireTime:"", // 过期时间
                lr_sass_tenant_f_DbCode:"", // 数据库
                lr_sass_tenant_f_Description:"", // 备注
                lr_sass_tenant_f_EnabledMark:1
            },
            rules: {
                lr_sass_tenant_f_Code:[
                    { required: true, message: this.$t('请输入编码') },
                    { 
                        validator: this.lr_existDbFiled,
                        fieldName:'f_Code',
                        keyValue:() => { return this.formData.lr_sass_tenant_f_Id },
                        tableName:'lr_sass_tenant',
                        keyName:'f_Id',
                        trigger: 'null'
                    }
                ],
                lr_sass_tenant_f_Name:[
                    { required: true, message: this.$t('请输入名称') },
                ],
                lr_sass_tenant_f_Company:[
                    { required: true, message: this.$t('请输入公司') },
                ],
                lr_sass_tenant_f_TenantGroupId:[
                    { required: true, message: this.$t('请选择租户组') },
                ],
                lr_sass_tenant_f_DbCode:[
                    { required: true, message: this.$t('请选择数据库') },
                ],
                lr_sass_tenant_f_Mail:[
                    { pattern: /^[a-zA-Z0-9-_.]+@[a-zA-Z0-9-_]+.[a-zA-Z0-9]+$/, message: this.$t('请输入邮箱') },
                ],
            },
            cDbCodes:[]
            
        };
    },
    computed: {
        lr_sass_tenant_f_TenantGroupIdOptions(){
            const data = this.lr_DataSource('tenantGroup')
            return this.lr_DataSourceOptions(data,'f_id','f_name')
        }
    },
    created(){
        this.lr_loadDblink()
    },
    methods: {
        // 重置表单
        resetForm() {
            this.$formClear(this.$refs.form)
            this.activeName = 'tab0'
            this.cDbCodes = []
            
        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            if(this.cDbCodes.length >0 && this.cDbCodes.findIndex(t=>!t.from ||!t.to) > -1){
                this.$message({
                    type: 'warning',
                    message: this.$t('请设置子库映射!')
                })
                return false  
            }
            
            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData,data,'lr_sass_tenant')
            if(this.formData.lr_sass_tenant_f_CDbCode){
                const cDbCodes = JSON.parse(this.formData.lr_sass_tenant_f_CDbCode)
                this.cDbCodes = cDbCodes
            }
           
            delete this.formData.lr_sass_tenant_f_CDbCode


        },
        // 获取表单数据
        getForm() {
            const postData = this.$getFormData(this.formData,'lr_sass_tenant')
            postData.f_CDbCode = JSON.stringify(this.cDbCodes)
            return postData
        },

        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },

        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                postData.f_Id = keyValue
                return await this.$awaitWraper(api.add(postData))
            }
        },

        handleRemoveCDbCodes(index){
            this.cDbCodes.splice(index,1)
        },
        handleAddCDbCodes(){
            this.cDbCodes.push({
                from: '',
                to: ''
            })
        }
    }
}
</script>